<template>
  <div>
    <div class="banner-block">
      <!-- <div class="shoping-banner">
          1111
        </div> -->
      <div class="slide-banner">
        <div class="banner-wrapper">
          <div
            class="slide-banner-wrapper"
            ref="slide"
          >
            <div class="slide-banner-content">
              <div class="slide-page page1">
                <img src="../../images/banner1.jpg" />
              </div>
              <div class="slide-page page2">
                <img src="../../images/banner2.png" />
              </div>
              <div class="slide-page page3">
                <img src="../../images/banner3.jpg" />
              </div>
              <div class="slide-page page4">
                <img src="../../images/banner4.jpg" />
              </div>
            </div>
          </div>
          <div class="dots-wrapper">
            <span
              class="dot"
              v-for="(item, index) in 4"
              :key="index"
              :class="{ active: currentPageIndex === index }"
            ></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import BScroll from "@better-scroll/core";
import Slide from "@better-scroll/slide";
BScroll.use(Slide);
export default {
  data() {
    return {
      currentPageIndex: 0,
    };
  },
  mounted() {
    this.init();
  },
  beforeDestroy() {
    this.slide.destroy();
  },
  methods: {
    init() {
      this.slide = new BScroll(this.$refs.slide, {
        scrollX: true,
        scrollY: false,
        slide: true,
        useTransition: true,
        momentum: false,
        bounce: false,
        stopPropagation: true,
        probeType: 2,
      });
      this.slide.on("scrollEnd", this._onScrollEnd);

      this.slide.on("slideWillChange", (page) => {
        this.currentPageIndex = page.pageX;
      });
    },
    _onScrollEnd() {
      // console.log(this.slide.getCurrentPage());
    },
  },
};
</script>
<style lang="less" scoped>
// 轮播start
.banner-block {
  overflow: hidden;
  background-image: linear-gradient(#ffdb47, #f5f5f5);
  .shoping-banner {
    width: 15.36rem;
    height: 5.54666rem;
    // border-radius: 10px;
    background-color: red;
    margin: 0 auto;
    margin-top: 5px;
    overflow: hidden;
  }
}
.slide-banner {
  .banner-wrapper {
    position: relative;
    .slide-banner-wrapper {
      min-height: 1px;
      overflow: hidden;
      // width: 14.93333rem;
      // width: 14.9333rem;
      width: 94%;
      height: 5.54666rem;
      margin: 0 auto;
      border-radius: 8px;
      .slide-banner-content {
        height: 100%;
        white-space: nowrap;
        font-size: 0;
        .slide-page {
          display: inline-block;
          height: 5.54666rem;
          // width: 14.93333rem;
          // line-height: 130px;
          text-align: center;
          font-size: 1.109333rem;
          > img {
            // width: 14.93333rem;
            width: 100%;
            height: auto;
            position: relative;
            top: -1.706666rem;
          }
        }
      }
    }
    .dots-wrapper {
      position: absolute;
      bottom: 4px;
      left: 50%;
      transform: translateX(-50%);
      .dot {
        display: inline-block;
        margin: 0 4px;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #eee;
        &.active {
          width: 20px;
          border-radius: 5px;
        }
      }
    }
  }
}
// 轮播end
</style>
